<template>
  <div class="package-info">
    <div class="header">
      <div class="title">包裹信息</div>
    </div>
    <vxe-table
      border
      stripe
      size="small"
      :loading="loading"
      :data="tableData"
      header-align="center"
      align="center"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="packageType" title="单据类型" width="100">
        <template #default="{ row }">
          {{ row.packageType === 'main' ? '主包裹' : '子包裹' }}
        </template>
      </vxe-column>
      <vxe-column field="logisticsNo" title="物流单号" min-width="160"></vxe-column>
      <vxe-column field="logisticsPrint" title="物流单打印" width="100">
        <template #default="{ row }">
          <el-button 
            type="text" 
            size="small" 
            @click="printLogistics(row)"
            v-if="row.logisticsNo"
          >
            打印
          </el-button>
        </template>
      </vxe-column>
      <vxe-column field="boxNo" title="箱号" min-width="180"></vxe-column>
      <vxe-column field="packageNo" title="包裹号" width="80"></vxe-column>
      <vxe-column field="packageCount" title="包裹数" width="80"></vxe-column>
      <vxe-column field="logisticsCost" title="物流成本" width="100">
        <template #default="{ row }">
          {{ row.logisticsCost ? '￥' + row.logisticsCost.toFixed(2) : '0.00' }}
        </template>
      </vxe-column>
      <vxe-column field="weight" title="称重重量" width="100">
        <template #default="{ row }">
          {{ row.weight ? row.weight.toFixed(2) : '0.00' }}
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  name: 'PackageInfo',
  props: {
    deliveryOrderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      tableData: []
    }
  },
  watch: {
    deliveryOrderId: {
      handler(val) {
        if (val) {
          this.getPackageInfo()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取包裹信息
    getPackageInfo() {
      this.loading = true
      // TODO: 调用获取包裹信息接口
      // getPackageInfo(this.deliveryOrderId).then(res => {
      //   this.tableData = res.data
      // }).finally(() => {
      //   this.loading = false
      // })

      // 模拟数据
      setTimeout(() => {
        this.tableData = [
          {
            packageType: 'main',
            logisticsNo: 'DPK301581936665',
            boxNo: 'SDO260385693689_001',
            packageNo: '1',
            packageCount: 2,
            logisticsCost: 0.00,
            weight: 0.00
          },
          {
            packageType: 'sub',
            logisticsNo: 'DPK301581934909',
            boxNo: 'SDO260385693689_002',
            packageNo: '2',
            packageCount: 2,
            logisticsCost: 0.00,
            weight: 0.00
          }
        ]
        this.loading = false
      }, 500)
    },

    // 打印物流单
    printLogistics(row) {
      this.$modal.msgInfo(`打印物流单：${row.logisticsNo}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.package-info {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .header {
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
